<%@ page import="java.util.Random" %>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ page isELIgnored="false"%>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="renderer" content="webkit" />
<title><sitemesh:write property='title' /></title>
<link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet" />
<link href="${pageContext.request.contextPath}/static/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<link href="${pageContext.request.contextPath}/static/css/main.css" rel="stylesheet"/>
<link href="${pageContext.request.contextPath}/static/css/enter.css" rel="stylesheet"/>
<link href="${pageContext.request.contextPath}/static/css/jquery.validator.css" rel="stylesheet"/>
<link href="${pageContext.request.contextPath}/static/css/dashboard.css" rel="stylesheet"/>
<link href="${pageContext.request.contextPath}/static/css/dashboard.css" rel="stylesheet"/>
<link href="${pageContext.request.contextPath}/static/css/style.css" rel='stylesheet' type='text/css' media="all" />
<link href="${pageContext.request.contextPath}/static/plugins/sweetalert/sweetalert.css" rel="stylesheet"/>
<link href="${pageContext.request.contextPath}/static/css/normalize.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/static/css/demo.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/css/icons.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/css/component.css" rel="stylesheet" type="text/css"  />
<script src="${pageContext.request.contextPath}/static/js/modernizr.custom.js"></script>


	<%
		int bg= 1+(int)(Math.random()*6);
		request.setAttribute("bg",bg);
	%>
<sitemesh:write property='head'/>
</head>
<body style="background-image: url(${pageContext.request.contextPath}/static/img/${bg}.jpg);">
	<script src="${pageContext.request.contextPath}/static/js/zh-CN.js"></script>
	<script src="${pageContext.request.contextPath}/static/js/jquery.validator.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/js/jquery.pin.js"></script>
	<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/bootstrap-table/bootstrap-table.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/js/jquery.particleground.min.js"></script> 
	<script src="${pageContext.request.contextPath}/static/plugins/sweetalert/sweetalert.min.js"></script>

		<div class="mp-container">
			<!-- Push Wrapper -->
			<div class="mp-pusher" id="mp-pusher">
				<!-- mp-menu -->
				<nav id="mp-menu" class="mp-menu">
					<div class="mp-level">
						<h2 class="icon icon-world">All Categories</h2>
						<ul>
							<li class="icon icon-arrow-left">
								<a class="icon icon-display" href="#"><spring:message code="menu.title.first"/> </a>
								<div class="mp-level">
									<h2 class="icon icon-display"><spring:message code="menu.title.first"/> </h2>
									<ul>
										<li class="icon icon-arrow-left">
											<a class="icon icon-phone" href="${pageContext.request.contextPath}/jwc.pj">
												<spring:message code="menu.title.first.first"/>
											</a>
										</li>
										<li class="icon icon-arrow-left">
											<a class="icon icon-tv" href="${pageContext.request.contextPath}/pj.pj">
												<spring:message code="menu.title.first.second"/>
											</a>
										</li>
										<li class="icon icon-arrow-left">
											<a class="icon icon-tv" href="${pageContext.request.contextPath}/materials/upload.pj">
												<spring:message code="menu.title.first.third"/>
											</a>
										</li>
										<li class="icon icon-arrow-left">
											<a class="icon icon-camera" href="#">Cameras</a>
											<div class="mp-level">
												<h2>Cameras</h2>
												<ul>
													<li><a href="#">Smart Shot</a></li>
													<li><a href="#">Power Shooter</a></li>
													<li><a href="#">Easy Photo Maker</a></li>
													<li><a href="#">Super Pixel</a></li>
												</ul>
											</div>
										</li>
									</ul>
								</div>
							</li>
							<li class="icon icon-arrow-left">
								<a class="icon icon-news" href="#">其他</a>
								<div class="mp-level">
									<h2 class="icon icon-news">其他</h2>
									<ul>
										<li><a href="${pageContext.request.contextPath}/package.pj">快递来了</a></li>
										<li><a href="#">Scientific American</a></li>
										<li><a href="#">The Spectator</a></li>
										<li><a href="#">The Rambler</a></li>
										<li><a href="#">Physics World</a></li>
										<li><a href="#">The New Scientist</a></li>
									</ul>
								</div>
							</li>
							<li class="icon icon-arrow-left">
								<a class="icon icon-shop" href="#">Store</a>
								<div class="mp-level">
									<h2 class="icon icon-shop">Store</h2>
									<ul>
										<li class="icon icon-arrow-left">
											<a class="icon icon-t-shirt" href="#">Clothes</a>
											<div class="mp-level">
												<h2 class="icon icon-t-shirt">Clothes</h2>
												<ul>
													<li class="icon icon-arrow-left">
														<a class="icon icon-female" href="#">Women's Clothing</a>
														<div class="mp-level">
															<h2>Women's Clothing</h2>
															<ul>
																<li><a href="#">Tops</a></li>
																<li><a href="#">Dresses</a></li>
																<li><a href="#">Trousers</a></li>
																<li><a href="#">Shoes</a></li>
																<li><a href="#">Sale</a></li>
															</ul>
														</div>
													</li>
													<li class="icon icon-arrow-left">
														<a class="icon icon-male" href="#">Men's Clothing</a>
														<div class="mp-level">
															<h2>Men's Clothing</h2>
															<ul>
																<li><a href="#">Shirts</a></li>
																<li><a href="#">Trousers</a></li>
																<li><a href="#">Shoes</a></li>
																<li><a href="#">Sale</a></li>
															</ul>
														</div>
													</li>
												</ul>
											</div>
										</li>
										<li>
											<a class="icon icon-diamond" href="#">Jewelry</a>
										</li>
										<li>
											<a class="icon icon-music" href="#">Music</a>
										</li>
										<li>
											<a class="icon icon-food" href="#">Grocery</a>
										</li>
									</ul>
								</div>
							</li>
							<li><a class="icon icon-photo" href="#">Collections</a></li>
							<li><a class="icon icon-wallet" href="${pageContext.request.contextPath}/user/changeStyle">
								<spring:message code="exchange.theme"/>
							</a></li>
						</ul>
					</div>
				</nav>
				<!-- /mp-menu -->

				<div><!-- this is for emulating position fixed of the nav -->
					<div class="scroller-inner">
						<!-- Top Navigation -->
						<div class="codrops-top clearfix" style="position:fixed;z-index:1;top:0px;background:#333;">
							<a href="#" id="trigger">菜单</a> 
							<span class="right"><a href="${pageContext.request.contextPath}${user==null ? '/user.pj' : '/jwc.pj'}"><span>${user==null ?  '登录':user.name }</span></a></span>
							<b id="title"><spring:message code="web.name"/></b>
						</div> 
						<sitemesh:write property='body' />  
					</div><!-- /scroller-inner -->
				</div><!-- /scroller -->

			</div><!-- /pusher -->
		</div><!-- /container -->
		<script type="text/javascript">
		function middle(){
			var width= document.body.clientWidth;  
			document.getElementById('title').style.cssText=' float:right; margin-right:'+(width/2-80)+'px;';
		}
		middle();
		window.onresize = function(){
			middle();
		}
		</script>
		<script src="${pageContext.request.contextPath}/static/js/classie.js"></script>
		<script src="${pageContext.request.contextPath}/static/js/mlpushmenu.js"></script>
		<script>
			new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
			$(function(){
				document.getElementById('ztc2pj').style.cssText='padding-top: 30px';
			});
		</script> 

</body>
</html>
